<template>
    <el-amap ref="schemeMap" :amap-manager="amapManager" :events="mapEvents" vid="amapDemo" class="show_amap">
        <el-amap-marker v-for="(marker, index) in markers" :position="[marker.longitude, marker.latitude]"
            :draggable="false" :key="index" :offset="marker.offset" :content="marker.content" :vid="index" />
    </el-amap>
</template>
<script>
import { AMapManager } from 'vue-amap';
const amapManager = new AMapManager(); // 新建生成地图画布
export default {
    name: 'MapMarker',
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    data() {
        let self = this;
        return {
            arrowDown: require('@/assets/arrow_down.png'),
            amapManager,
            map: null,
            mapEvents: {
                init(o) {
                    // o 为地图组件实例
                },
                complete() {
                    const map = self.amapManager.getMap() // 获取地图组件实例
                    this.map = map;
                    // setFitView(overlayList:Array)
                    // 根据地图上添加的覆盖物分布情况，
                    // 自动缩放地图到合适的视野级别，参数overlayList默认为当前地图上添加的所有覆盖物图层
                    setTimeout(()=>{
                        map.setFitView()
                    },500)
                }
            },
            markers: []
        };
    },
    created() {
        this.markers = [];
        this.list.map(item => {
            console.log(item)
            this.addMarkerItem(item.id, item.name, item.lng, item.lat);
        });
    },
    methods: {
        /**
         * 添加坐标
         * @param {*} name 标牌名称
         * @param {*} roadType 标牌类型
         * @param {*} longitude 精度
         * @param {*} latitude 纬度
         */
        addMarkerItem(markerId, name, longitude, latitude) {
            let arrowDown = this.arrowDown;
            let content = `<div class="custom-content-marker">
                   <div class="marker_item">
                    <p>${name}</p>
                    <span class="arrow"><img src="${arrowDown}"/></span>
                   </div>
                </div>`;
            let marker = {
                markerId,
                stationName: name, //桩号
                longitude: longitude, //经度
                latitude: latitude,
                content: content,
                offset: [-50, -41]
            };
            this.markers.push(marker);
        },
    },
    beforeDestroy() {
        this.map = null;
    }
};
</script>
<style lang="scss">
.show_amap {
    width: 100%;
    height: 100%;

    .custom-content-marker {
        position: relative;
        width: 100px;

        .marker_item {
            position: relative;
            height: 28px;
            font-size: 12px;
            text-align: center;
            background: #fff;
            border: 1px solid #888b8c;
            box-sizing: border-box;

            p {
                line-height: 28px;
            }

            .arrow {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: -14px;
            }
        }
    }
}
</style>
